<template>
	<!--人口设置 -->
	<div class="page-wrap">
		<div class="page-content p-0">
			<div class="page-column p-0">
				<div class="page-form p-x-0">
					<el-form
						:model="ruleForm"
						:rules="rules"
						label-position="left"
						label-width="140px"
						ref="form"
						label-suffix="："
					>
						<el-row>
							<el-col :span="24">
								<el-form-item label="人口输入类型" prop="PDPOPFLG001">
									<select-para
										style="width:100%"
										size="medium"
										class="mediumForm"
										v-model="ruleForm.PDPOPFLG001"
										:label.sync="ruleForm.PDPOPFLG001Name"
										:options="PDPOPFLG001options"
									></select-para>
								</el-form-item>
								<el-form-item label="有人口距离" prop="PDIBEGIN001" v-if="ruleForm.PDPOPFLG001 == 'UNIFORM'">
									<select-para
										style="width:100%"
										size="medium"
										class="mediumForm"
										v-model="ruleForm.PDIBEGIN001"
										:label.sync="ruleForm.PDIBEGIN001Name"
										:options="PDIBEGIN001options"
									></select-para>
								</el-form-item>
								<el-form-item label="人口密度" prop="PDPOPDEN001" v-if="ruleForm.PDPOPFLG001 == 'UNIFORM'">
									<el-input
										size="medium"
										class="mediumForm"
										oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,20})?).*$/g, '$1')"
										v-model="ruleForm.PDPOPDEN001"
									>
										<template slot="append">人/k㎡</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="bottom-btn">
					<el-button
						type="primary"
						:disabled="this.basic_Data.OCENDAT1001=='TRUE'"
						:loading="loading"
						@click="submitFun"
					>下一步</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import selectPara from "@/components/selectPara"
import FixBottomButton from "@/components/FixBottomButton"
import ueditor from "@/components/ueditor"
import { commPara } from "@/mixins/mixins"
import { mapState } from "vuex"

import { BATCH_DETAIL } from "@/service/hd5.js"

import { dome, selecttext } from "@/utils/verify.js"
export default {
	name: "aboutUs",
	props: {
		basicDataF: Object,
	},
	mixins: [commPara],
	components: {
		selectPara,
		FixBottomButton,
		ueditor,
	},

	data() {
		var PDPOPDEN = (rule, value, callback) => {
			if (value == "") {
				callback(new Error("输入值不能为空"))
			} else if (value < 0.0 || value > 1.0e6) {
				callback(new Error("输入范围为[0.0，1.0E+6] "))
			} else {
				callback()
			}
		}
		var PDIBEGIN001 = (rule, value, callback) => {
			if (value == "") {
				callback(new Error("输入值不能为空"))
			} else if (value < 1 || value > this.GENUMRAD001) {
				callback(new Error("输入范围为[1，" + this.GENUMRAD001 + "] "))
			} else {
				callback()
			}
		}
		return {
			GENUMRAD001: "",
			activeTab: "5",
			ruleForm: {
				PDPOPFLG001: "FILE",
				PDIBEGIN001: "",
				PDPOPDEN001: "",
				PDIBEGIN001Name: "",
			},
			rules: {
				PDPOPFLG001: [
					{
						required: true,
						message: "请选择",
						trigger: "change",
					},
				],
				PDIBEGIN001: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
				PDPOPDEN001: [
					{
						validator: dome(0.0, 1.0e6),
						trigger: ["change", "blur"],
					},
				],
			},
			PDPOPFLG001options: [
				{
					label: "FILE",
					value: "FILE",
				},
				{
					label: "UNIFORM",
					value: "UNIFORM",
				},
			],
			// PDIBEGIN001options: [],

			loading: false,
		}
	},
	computed: {
		...mapState({
			early_Data: (state) => state.token.early_Data,
			basic_Data: (state) => state.token.basic_Data,
		}),
		PDIBEGIN001options: function () { 
			let temp = this.basic_Data.GESPAEND_DISTANCE.map((item, index) => {
				return {
					label: item,
					value: index + 1,
				}
			})
			return temp
		},
	},
	mounted() {
		this.setData()
	},
	methods: {
		setData() {
			this.ruleForm.PDPOPFLG001 = this.early_Data.PDPOPFLG001
				? this.early_Data.PDPOPFLG001
				: "FILE"
			this.ruleForm.PDIBEGIN001 = this.early_Data.PDIBEGIN001
				? this.early_Data.PDIBEGIN001
				: ""
			this.ruleForm.PDPOPDEN001 = this.early_Data.PDPOPDEN001
				? this.early_Data.PDPOPDEN001
				: ""
		},
		submitFun() {
			//保存
			this.$refs.form.validate((valid) => {
				if (valid) { 
					let tempdata = JSON.parse(JSON.stringify(this.early_Data))
					tempdata.PDPOPFLG001 = this.ruleForm.PDPOPFLG001
					if (tempdata.PDPOPFLG001 == "UNIFORM") {
						tempdata.PDIBEGIN001 = parseInt(
							this.ruleForm.PDIBEGIN001
						)
						tempdata.PDPOPDEN001 = parseFloat(
							this.ruleForm.PDPOPDEN001
						)
					}
					tempdata.SETPAGEINDEX = this.activeTab
					this.$store.dispatch("upData_early_Data", tempdata) 
					let params = {
						batchid: this.$route.query.id,
						batchinfo: "ZAOQI",
						submitjson: JSON.stringify(tempdata),
					} 
					this.$appApi
						.BATCH_SUBMIT(params)
						.then((res) => { 
							var str = res.data.substring(0, 1)
							if (str == "E") {
								let message = res.data.substring(6)
								this.$notify.error({
									title: "保存失败！",
									message: message,
									type: "success",
								})
							} else if (str == "S") {
								this.$notify({
									message: "保存成功！",
									type: "success",
								})
							}
						})
						.catch((err) => {
							console.log(err)
						})
					this.$emit("changeActiveTab", this.activeTab)
					this.$store.dispatch("change_early_showTab", this.activeTab)
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.page-flex-row /deep/ .el-collapse-item__header {
	background: #f3f9fe;
}
</style>